<template>
    <section>
      <el-col :span="20" style="padding-top: 24px" class="demo-dynamic">
        <el-card>
          <el-form  label-width="100px" class="demo-dynamic">
            <template v-for="(item,index) in tableList">
              <el-form-item
                label="表格列名"
                prop=""
                :index="index"
                :key="index+''"
                :rules="[{required:true,message:'我只是一个提示',trigger: 'blur'}]"
              >

                <el-input v-model="item.prop" ></el-input><el-input v-model="item.name"></el-input><el-button type="danger" @click="removeItem(index)">删除</el-button>
              </el-form-item>
            </template>
            <el-form-item>
              <el-button @click="addTableList" type="primary">新增</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
          <pre class="layui-code">
            <template v-for="item in tableList">
              el-table-column prop="{{item.prop}}" label="{{item.name}}" width="120" sortable> el-table-column></template>
          </pre>
        </el-card>
      </el-col>
    </section>
</template>

<script>
export default {
  name: 'ElementTable',
  data () {
    return {
      tableList: [{prop: 'en', name: 'zn'}, {prop: 'en', name: 'zn'}]
    }
  },
  watch: {
    tableList () {
      window.layui.use('code', function () { // 加载code模块
        // window.layui.code({
        // }) // 引用code方法
      })
    }
  },
  methods: {
    addTableList () {
      this.tableList.push({prop: 'en', name: 'zn'})
    },
    removeItem (index) {
      this.tableList.splice(index, 1)
    },
    reset () {
      this.tableList = [{prop: 'en', name: 'zn'}, {prop: 'en', name: 'zn'}]
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
   .demo-dynamic .el-input {
    margin-right: 10px;
    width: 270px;
    vertical-align: top;
  }
</style>
